<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>想对你说</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        list-style: none;
      }

      body {
        height: 100vh;
        background: radial-gradient(ellipse at bottom, #1b2735 0, #090a0f 100%);
        filter: drop-shadow(0 0 10px white);
        position: relative;
        overflow: hidden;
      }

      .snow {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color: #fff;
        position: absolute;
      }
      .words {
        position: fixed;
        left: 50%;
        top: 30%;
        transform: translate(-50%, -50%);
        color: #fff;
        font-size: 1.5em;
        line-height: 2em;
        font-weight: 500;
        display: flex;
        flex-wrap: wrap;
        width: 1000px;
      }
      .display-none {
        display: none;
      }
      .img-con {
        width: 100%;
        height: 200px;
        text-align: center;
        position: fixed;
        top: 50%;
        display: none;
      }
      .img-con > img {
        width: 300px;
      }
      .words span {
        animation: jumpin 0.5s ease-out both;
      }
      @keyframes jumpin {
        from {
          transform: translateY(-20%);
          opacity: 0;
        }
        to {
          transform: translateY(0);
          opacity: 1;
        }
      }
    </style>
  </head>

  <body>
    <p class="words display-none">
      2024年8月21日，是我第一次遇见你。
      天也欢喜，地也欢喜，人也欢喜，欢喜你遇见了我，我也遇见了你。
      总有几分钟，其中的每一秒，你都愿意拿一年去换取。
      总有几颗泪，其中的每一次抽泣，你都愿意拿满手的承诺去代替。
      总有几段场景，其中的每幅画面，你都愿意拿全部的力量去铭记。
      总有几句话，其中的每个字眼，你都愿意拿所有的夜晚去复习。
      瑶瑶，我爱你
    </p>
    <div class="img-con">
      <img src="./yaoyao.jpg" />
    </div>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <script>
      $(function () {
        $(".words").removeClass('display-none')
        var words = $(".words").text().split("");
        $(".words").empty();
        words.forEach((w, i) => {
          $(`<span>${w}</span>`)
            .css({
              "animation-delay": 0.1 * i + "s",
            })
            .appendTo($(".words"));
        });
        for (var i = 0; i < 200; i++) {
          var x = Math.random() * 100;
          var y = Math.random() * 100;
          var scale = Math.random();
          var opacity = Math.random();
          var t1 = Math.random() * 20 + 10;
          var t2 = Math.random() * 30;

          var o = Math.random() * 20 - 10;
          var x1 = x + o;
          var x2 = x + o / 2;

          // 随机数产生雪花 以及大小
          $(`<style> @keyframes fall${i} {
                 ${y}%{
                     transform: translate(${x1}vw, ${y}vh) scale(${scale});
                 }
                 to{
                     transform: translate(${x2}vw,100vh) scale(${scale});
                 }
             }
          </style>`).appendTo($("head"));

          $('<div class="snow"></div>')
            .css({
              transform: `translate(${x}vw, -10px) scale(${scale})`,
              opacity: opacity,
              animation: `fall${i} ${t1}s -${t2}s linear infinite`,
            })
            .appendTo($("body"))
            .end();
          setTimeout(() => {
            $(".img-con").fadeIn(2000);
          }, 23000);
        }
      });
    </script>
  </body>
</html>
